<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#div1 {
	width: 200px;
	height: 200px;
	border: 1px solid black;
	margin: 200px auto;
	perspective: 500 px;/* 视角 */
	background-color: black;
}

#div2 {
	width: 200px;
	height: 200px;
	background-color: red;
	font-size: 50px;
	transition: 3s;
}

#div2:HOVER {
	background-color: yellow;
/* 变动 */	transform: rotateX(360deg) translateZ(-500px); 
	transform:
}

#div2:ACTIVE {
	box-shadow: 0 0 300px yellow;
}
</style>

</head>
<body>
	<div id="div1">
		<div id="div2">123456</div>
	</div>
</body>
</html>